<template>
  <div>
    <ContentTitle :info="ctInfo">
      <el-button
        type="primary"
        size="small"
        style="height: 40px"
        @click="HanderAdd"
        >新增测量类型</el-button
      >
    </ContentTitle>

    <!-- 表格 -->
    <Form
      :listData="listData"
      :formatTimec="formatTimec"
      :centerDialogVisible.sync="centerDialogVisible"
      @edit="HanderEdit"
    />

    <!-- 新增或编辑列表弹窗 -->
    <Dialog
      :dialogFormVisible.sync="dialogFormVisible"
      :form.sync="form"
      @submit="submit"
    />

    <!-- 删除弹窗确认 -->
    <el-dialog
      title="删除测量类型"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span>删除后数据将不可恢复,确定要删除?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            del();
            centerDialogVisible = false;
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ContentTitle from "@/components/ContentTitle.vue";
import Form from "./components/Form.vue";
import Dialog from "./components/Dialog.vue";
import {
  $measurementList,
  $measurementAdd,
  $measurementEdit,
  $measurementDel,
} from "@/api/index.js";
export default {
  components: {
    ContentTitle,
    Form,
    Dialog,
  },
  data() {
    return {
      // currPage: 1,
      // pageSize: 10,
      // 存储当前编辑的列表下标
      $index: -1,
      // 默认打开对话框时，为添加功能,true为编辑功能
      editing: false,
      // 头部显示信息
      ctInfo: {
        type: "自定义类型",
        text: "测量类型",
        msg: "展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。",
      },
      // 表头名称，但目前没用到
      tableTitle: {
        序号: "index",
        测量ID: "id",
        测量名称: "name",
        测量单位: "unit",
        创建时间: "cTime",
        更新时间: "uTime",
        操作: "addSub",
      },
      // 列表数据,进行增删改,即可动态渲染
      listData: [],
      // 新增或编辑列表弹窗
      dialogFormVisible: false,
      form: {
        name: "",
        unit: "",
      },

      // 弹出删除列表
      centerDialogVisible: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获得列表
    getList() {
      $measurementList()
        .then((res) => {
          // console.log(res);
          this.listData = res.data;
        })
        .catch((err) => {
          console.log("获取测量列表失败", err);
        });
    },
    // 点击弹窗的确认按钮,执行添加或修改操作
    submit() {
      // 获取表单中的数据
      let obj = {
        name: this.form.name,
        unit: this.form.unit,
      };
      if (this.editing) {
        // 网络请求编辑,传参,获取表单后,还要添加id和创建时间,更新时间无需上传,
        // 原本不应该上传创建时间,可是这里后端没有处理
        let eObj = {
          ...obj,
          id: this.listData[this.$index].id,
          cTime: this.listData[this.$index].cTime,
        };
        $measurementEdit(eObj)
          .then((res) => {
            // 获取列表
            let obj = this.listData[this.$index];
            // 修改列表,由于后端没有传创建时间,所以要自己添加,否则显示异常
            obj = {
              ...res.data,
              cTime: obj.cTime,
            };
            // 删除下标为$index的,在同一位置添加
            // this.listData[this.$index] = obj;  //这个直接赋值不能引起页面变化,七个数组方法可以
            this.listData.splice(this.$index, 1, obj);
          })
          .catch((err) => console.log("添加失败", err));
      } else {
        // 添加
        // 把表单数据提交到后台
        $measurementAdd(obj)
          .then((res) => {
            // 添加成功，合并列表
            this.listData.unshift(res.data);
          })
          .catch((err) => console.log("添加失败", err));
      }
      // 隐藏弹窗
      this.dialogFormVisible = false;
    },
    // 点击添加按钮,显示弹窗
    HanderAdd() {
      this.editing = false;
      this.form.name = "";
      this.form.unit = "";
      this.dialogFormVisible = true;
    },
    // 单元格点击编辑按钮，显示弹窗
    HanderEdit($index, row) {
      // 修改状态
      this.editing = true;
      // 保存用于后续修改操作
      this.$index = $index;
      // 修改弹窗详情,使用es6的拓展符进行深拷贝，如果不是，则在修改表单的同时，没点确定的时候就修改了列表
      this.form = { ...row };
      // 显示详情
      this.dialogFormVisible = true;
    },
    // 删除操作
    del() {
      // 请求删除
      $measurementDel({ id: this.listData[this.$index].id })
        .then((res) => {
          console.log(res);
          // 删除
          this.listData.splice(this.$index, 1);
        })
        .catch((err) => console.log("删除失败", err));
    },
    formatTimec(row, column, cellValue, index) {
      return this.formatTime(cellValue);
    },
  },
};
</script>

<style>
</style>